<!doctype html>
<html>
	<head>
		<meta charset = "utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE = edge">
		<meta name = "viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">

		<title>志彪的高德地图</title>
		<link rel = "stylesheet" href = "styletable.css"/>
		<script src="https://webapi.amap.com/maps?v=1.4.15&key=5ed4e9faab53f848f70b155242204142"></script>
		<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>

		<style>
			html,
			body,
			#container{
				width: 100%;
				height: 100%;
			}
		</style>
	</head>

	<body>
		<div id = "container"></div>

		<div class="input-card" style="width: auto">
	   		<div class="input-item">
	        	<input id="piexBtn" type="button" class="btn" value="平移像素值：(50,100)"/>
	    	</div>
		    <div class="input-item">
		        <input id="pantoBtn" type="button" class="btn" value="地图中心点平移至：(116.405467,39.907761)"/>
		    </div>
		</div>
		<script>
		    var map = new AMap.Map('container', {
		        resizeEnable: true,
		        zoom: 13,
		        center:[112.884964,28.206887]
		    });

		    AMap.event.addDomListener(document.getElementById('piexBtn'), 'click', function() {
		        map.panBy(50, 100);
		    });
		    AMap.event.addDomListener(document.getElementById('pantoBtn'), 'click', function() {
		        map.panTo([116.405467, 39.907761]);
		    });
		</script>
	</body>


</html>
